const AddBillFunnel = () => {
  const {currentMembers} = useRequestGetCurrentMembers();
  const [step, setStep] = useState<BillStep>('price');
  const [billInfo, setBillInfo] = useState<BillInfo>({
    price: '',
    title: '',
    members: [],
  });

  useEffect(() => {
    currentMembers && setBillInfo(prev => ({...prev, members: currentMembers}));
  }, [currentMembers]);

  return (
    <MainLayout backgroundColor="white">
      <TopNav>
        <Back />
      </TopNav>
      {step === 'price' && <PriceStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} />}
      {step === 'title' && <TitleStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} />}
      {step === 'members' && (
        <MembersStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} currentMembers={currentMembers} />
      )}
    </MainLayout>
  );
};

// ...
  const onTitleInputChange = (value: string) => {
    if (REGEXP.billTitle.test(value)) {
      setBillInfo(prev => ({...prev, title: value}));
    }
  };

  const handleTitleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.value.length > 12) {
      setErrorMessage('지출내역은 12자까지 입력 가능해요');
      onTitleInputChange(billInfo.title.slice(0, 12));
    } else {
      setErrorMessage('');
      onTitleInputChange(event.target.value);
    }
  };

  const canSubmitTitleInput = billInfo.title && !errorMessage;

  const handleTitleInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.nativeEvent.isComposing) {
      return;
    }
    if (event.key === 'Enter' && canSubmitTitleInput) {
      event.preventDefault();
      setStep('members');
    }
  };
// ...

//...
  const onNameInputChange = (value: string) => {
    if (REGEXP.memberName.test(value)) {
      setNameInput(value);
    }
  };

  const handleNameInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.value.length > 4) {
      setErrorMessage('이름은 4자까지 입력 가능해요');
      onNameInputChange(nameInput.slice(0, 4));
    } else {
      setErrorMessage('');
      onNameInputChange(event.target.value);
    }
  };
//...

//...
  const setBillInfoMemberWithId = (name: string) => {
    const existingMember = currentMembers.find(currentMember => currentMember.name === name);
    if (existingMember) {
      setBillInfo(prev => ({...prev, members: [...prev.members, {id: existingMember.id, name: name}]}));
    } else {
      setBillInfo(prev => ({...prev, members: [...prev.members, {id: -1, name: name}]}));
    }
  };
//...

//...
  const handlePostBill = async () => {
    if (billInfo.members.map(({id}) => id).includes(-1)) {
      postMembers({
        members: billInfo.members.filter(member => member.id === -1),
      });
    } else {
      postBill({
        title: billInfo.title,
        price: Number(billInfo.price.replace(',', '')),
        members: billInfo.members.map(({id}) => id),
      });
    }
  };

  useEffect(() => {
    if (isSuccessPostMembers && responseMemberIds) {
      postBill({
        title: billInfo.title,
        price: Number(billInfo.price.replace(',', '')),
        members: billInfo.members.map(member =>
          member.id === -1 ? responseMemberIds.members.find(m => m.name === member.name)?.id || member.id : member.id,
        ),
      });
    }
  }, [isSuccessPostMembers, responseMemberIds]);

  useEffect(() => {
    if (isSuccessPostBill) {
      navigate(`/event/${eventId}/admin`);
    }
  }, [isSuccessPostBill]);
//...

// usenumberKeyboard.tsx
const useNumberKeyboard = ({type, maxNumber, onChange}: Props) => {
  const [value, setValue] = useState('');
// ...

// usenumberKeyboard.tsx
const useNumberKeyboard = ({type, maxNumber, initialValue, onChange}: Props) => {
  const [value, setValue] = useState(initialValue ?? '');
// ...